<template>
  <div class="department">
    <!-- 工具栏 -->
    <div class="btngroup">
      <el-button class="filter-item" size="small" type="primary" icon="el-icon-plus" @click="handDialogShow">新增
      </el-button>
    </div>
    <div class="table-department">
      <el-table :data="departmentList" size="small" style="width: 100%;" row-key="id" v-loading="listLoading"
        :tree-props="{children: 'child'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="部门名称" min-width="280" align="left">
            <template slot-scope="{row}">
                <div class="deparname" :style="{ marginLeft: row.child && row.child.length || row.parent? 0 : 17 + 'px'}">
                    {{row.dt_name}}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit" @click="handTagUpdate(scope.row)"></el-button>
            <el-button size="small" icon="el-icon-delete" @click="handTagDelete(scope.row.id)"></el-button>
            <el-button size="small" icon="el-icon-user" @click="handlePeopleDialogShow(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="deparment-info">
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="400px">
        <el-form ref="form" :model="form" :rules="rules" label-width="75px" label-position="right">
                <el-form-item label="名称" prop="dt_name">
                    <el-input v-model="form.dt_name" size="small" placeholder="部门名称" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级部门" style="margin-bottom: 0">
                        <treeselect class="select" placeholder="请选择部门" v-model="form.parent" :options="departmentList" :normalizer="normalizer"/>
                      </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="handSubmit" size="small">确 定</el-button>
                  </div>
            </el-dialog>
    </div>
    <people-manger :dialogVisible="visibleForPeople" :handleClose="handlePeopleClose" :rowData="userRow"></people-manger>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    filterObj
  } from '@/utils/index.js'
  import {
    getUserDepartment,
    postUserDepartment,
    patchUserDepartment,
    deleteUserDepartment
  } from '@/api/user.js'

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    name: 'Department',
    components: {
        Treeselect,
      'Pagination': require('@/components/Pagination').default,
      'PeopleManger' : () => import('./peopleManger.vue')
    },
    computed: {
      ...mapGetters([
        'name',
        'roles',
        'id'
      ]),
      dialogTitle(){
        const title = this.isEdit ? '编辑' : '新增'
        return title + '部门'
      }
    },
    data() {
      return {
        listLoading: true,
        departmentList: [],
        multipleSelection: [],
        isEdit: false,
        form: {},
        rules: {
            dt_name: [{
              required: true,
              message: '请输入部门名称',
              trigger: 'blur'
            }]
        },
        normalizer(node) {
          return {
            id: node.id,
            label: node.dt_name,
            children: node.child,
          }
        },
        dialogFormVisible: false,
        visibleForPeople:false,
        userRow:[] //行数据
      }
    },
    mounted() {
      this.requestDepartmentList()
    },
    methods: {
    // 新增
    handDialogShow(){
        this.dialogFormVisible = true
        this.isEdit = false
    },
     // 编辑
     handTagUpdate(row){
         this.isEdit = true
         this.form = row
         this.dialogFormVisible = true
     },
     // 删除
     handTagDelete(id){
       this.$confirm('此操作将删除部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        deleteUserDepartment(id).then(
            res =>{
                this.$message.success('删除部门成功')
                this.requestDepartmentList()
            })})
     },
     handlePeopleDialogShow(row){
        this.userRow = row
        this.visibleForPeople = true
     },
     handlePeopleClose(){
       this.visibleForPeople = false
       this.requestDepartmentList()
     },
     // 提交创建部门
     handSubmit(){
        this.$refs.form.validate(valid => {
          if (valid) {
            if(this.isEdit){
                const { id, dt_name, parent } = this.form
                const param = {
                    dt_name: dt_name,
                    parent: parent
                }
                patchUserDepartment(id, param).then(
                    res =>{
                        if(res && res.data && res.data.id){
                            this.dialogFormVisible = false
                            this.$notify.success({
                                title: '提示',
                                message: '编辑部门成功'
                            })
                            this.clearForm()
                            this.requestDepartmentList()
                        }else{
                            this.$notify.error({
                                title: '提示',
                                message: '编辑部门失败'
                            })  
                        }
                    }
                )
            }else{
                const param = {
                    dt_name: this.form.dt_name,
                    parent: this.form.parent
                }
                postUserDepartment(param).then(
                    res =>{
                        if(res && res.data && res.data.id){
                            this.dialogFormVisible = false
                            this.$notify.success({
                                title: '提示',
                                message: '新增部门成功'
                            })
                            this.clearForm()
                            this.requestDepartmentList()
                        }else{
                            this.$notify.error({
                                title: '提示',
                                message: '新增部门失败'
                            })  
                        }
                    }
                )
            }
          }
        })
     },
     // 请求表单
     clearForm(){
        this.form = {}
     },
      // 表格多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 请求用户部门列表
      requestDepartmentList() {
        getUserDepartment({
          owner: this.id
        }).then(
          res => {
            this.departmentList = res.data
            this.listLoading = false
          }
        )
      }
    }
  }

</script>
<style lang="scss">
  .department {
    padding: 20px 20px 45px 20px;
    .btngroup{
        margin-left: 10px;
    }
    .table-department {
      margin-top: 20px;
      .deparname{
          display: inline-block;
      }
    }
    .el-form-item__content{
        line-height: 0;
    }
  }

</style>
